﻿@{
    ViewBag.Title = "Dash board";
}

<div class="jumbotron">
    <h1>This is Refer To Friends Application</h1>
</div>

<div class="refer-friend-link">
    Click here to <a class="modal-link">Refer Friends</a>
</div>

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div id="refer-form" class="panel panel-primary">
            <div class="panel-heading">
                <span data-dismiss="modal" class="close-button"><span><img src="/Images/icon-close.gif" class="close-icon" /></span></span> 
                <h3 class="modal-title">Refer to Friend</h3>
            </div>
            <div class="panel-body">
                <div class="alert alert-danger hidden"></div>
                <form class="refer-friend">
                    <div class="row">
                        <!-- Your Email-->
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="name">Your Email <span class="mandatory">*</span></label>
                            <div class="col-md-9">
                                <div class="input-row">
                                    <input id="YourEmail" name="YourEmail" type="text" placeholder="Your Email" class="form-control" required />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <!-- Friend's Email-->
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="email">Friend's Email <span class="mandatory">*</span></label>
                            <div class="col-md-9">
                                <div class="input-row">
                                    <input id="FriendEmail" name="FriendEmail" type="text" placeholder="Friend's Email" class="form-control" required />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <!-- Your Name-->
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="email">Your name</label>
                            <div class="col-md-9">
                                <div class="input-row">
                                    <input id="YourName" name="YourName" type="text" placeholder="Your Name" class="form-control" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <!-- Phone Number-->
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="name">Phone Number</label>
                            <div class="col-md-9">
                                <div class="input-row">
                                    <input id="PhoneNumber" name="PhoneNumber" type="text" placeholder="Phone Number" class="form-control" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <!-- Message body -->
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="message">Comments</label>
                            <div class="col-md-9">
                                <textarea id="Comment" name="Comment" placeholder="Please provide any additional information..." rows="5" class="form-control"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <!-- Phone Number-->
                        <div class="form-group">
                            <div class="col-md-offset-3 col-md-9">
                                <label class="checkbox-inline no_indent">
                                    <input type="checkbox" id="IsSendEmailCopy" name="IsSendEmailCopy" value="true" class="regular-checkbox"> <span class="checkbox-text">Email me a copy</span>
                                </label>
                            </div>
                        </div>
                    </div>

                    <hr />

                    <div id="buttons_place">
                        <span class="pull-left"><span class="active">*</span> marks mandatory field</span>
                        <span class="pull-right">
                            <input type="button" id="btnCancel" class="btn" value="Cancel" />
                            <input type="submit" id="btnSubmit" class="btn btn-success" value="Submit" />
                            <img src="/images/icon-loader.gif" id="icon-loading" style="height:34px; margin: 0 auto; display:none; " /> 
                        </span>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div id="messages" class="modal" role="dialog">
    <div class="modal-dialog">
        <div id="message-panel" class="panel panel-primary">
            <div class="panel-heading">
                <span data-dismiss="modal" class="close-button"><span><img src="/Images/icon-close.gif" class="close-icon" /></span></span> 
                <h3 class="modal-title">Refer to Friend</h3>
            </div>
            <div class="panel-body">
                <div class="alert alert-success">
                    We have succeccful sent an email to your friend.
                </div>
            </div>
        </div>
    </div>
</div>
<script src="~/Scripts/refer-form.js"></script>